<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>class 和 style 绑定</title>
  <script src="../vue.js"></script>
  <style>
    .title {
      font-size: 50px;
      color: purple;
    }
    .strong {
      font-weight: 900;
    }
    .italic {
      font-style: italic;
    }
    .dec {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div id="app">
    <p
      :class="{ title: showTitle, strong: false }"
      class="italic"
    >
      {{title}}
    </p>
    <span :class="cls">
      {{title}}
    </span>

    <div :class="['title', { strong: true }, other]">
      {{title}}
    </div>

    <div :style="{ color: colr }">
      style 的样式
    </div>

    <div :style="[s1, s2]">
      style 数组样式
    </div>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        title: '我是title',
        showTitle: true,
        other: {
          italic: true,
          dec: true
        },
        cls: { 
          title: this.toggleShowTitle 
        },
        colr: 'yellowgreen',
        s1: {
          fontSize: '100px',
          color: 'red'
        },
        s2: {
          fontSize: '20px',
          color: 'aliceblue'
        }
      },
      computed: {
        toggleShowTitle() {
          return !this.showTitle
        }
      },
    })
  </script>
</body>
</html>